:root{
  --nav-width:92px;
  /* 自定义颜色 */
  --first-color:#0c5df4;
  --bg-color:#12192c;
  --sub-color:#b6cefc;
  --white-color:#fff;

  /* 字体 */
  --body-font:'Poppins',sans-serif;
  --normal-font-size:1rem;
  --small-font-size:0.875rem;

  /* 设置z-index级别
   */
   --nav-z-index: 100;

   *,::before,::after
   {
        box-sizing: border-box;
   }
}

body{
     position: relative;
     margin: 0;
     padding: 2rem 0 0 6.75rem;
     font-family: var(--body-font);
     transition: 0.5s;
}

h1{
     margin: 0;
}

ul{
     margin: 0;
     padding: 0;
     list-style: none;
}
a{
     text-decoration: none;
}


.left-navbar{
     position: fixed;
     top: 0;
     left: 0;
     width: var(--nav-width);
     height: 100vh;
     background-color: var(--bg-color);
     color: var(--white-color);
     padding: 1.5rem 1.5rem 2rem;
     z-index: var(--nav-z-index);
     box-sizing: border-box;
}
.left-navbar a{
     color: white;
}
.nav{
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     height: 100%;
     overflow: hidden;
}
.nav_toggle{
     font-size: 1.5rem;
}
.nav_brand{
     display: flex;
     justify-content: space-between;
     color: #fff;
     margin-bottom: 1rem;
}

.nav_list{
     display: flex;
     flex-direction: column;
}
.nav_link{
     display: grid;
     grid-template-columns: max-content max-content;
     align-items: center;
     padding: 0.5rem 0.8rem;
     border-radius: 5px;
     cursor: pointer;
     transition: 0.5s;
     margin-bottom: 0.5rem;
}

.nav_link.active{
     background-color: var(--first-color);
}
     
.nav_link:hover{
     background-color: var(--first-color);
}
.nav_icon{
     margin-right: 0.5rem;
     font-size: 1.5rem;
}
.nav_name{
     font-size: var(--small-font-size);
}

.expander{
     width: var(--nav-width+9.2rem);
}

.body-pd{
     padding: 2rem 0 0 16;
}
.nav_logout{

}